De QuerySelector en QuerySelectorAll methode
QuerySelector en QuerySelectorAll methode, die deel uitmaken van de HTML 5 specificatie, vervangt de nood aan één of ander framework zoals JQuery om op een gemakkelijke manier elementen te selecteren.Gebruik
Deze methode laten toe om op een intuïtieve manier elementen op een paagina te selecteren. Bijvoorbeeld, het statement:
document.querySelector('#banner');
doet hetzelfe als:
document.getElementById('banner')
Zo, wat winnen we daarmee. Niet veel, hoor ik je zeggen. Inderdaad, maar wat denk je van:
document.querySelector('#banner h1 + p')
Dit is al iets anders. Met de document.querySelector methode kan je dezelfde combinaties gebruiken als in CSS.
De document.querySelector methode retourneert een enkelvoudige waarde, namelijk een referentie naar één element. Wil je meerdere elementen ophalen gebruik je de methode document.querySelectorAll:
var hiFrets = document.querySelectorAll('table#boek tr:nth-child(3)')
Bovenstaand statement selecteert elke 3de rij uit de tabel met id = boek.
Als je migreert van jQuery naar moderne JavaScript, kan het een uitdaging zijn om Document.querySelector te gebruiken in plaats van de eenvoudige JQuery / Sizzle shortcut $. Gelukkig kan je zelf de overgang gemakkelijker maken. Aan het begin van je script, plaatst je het volgende:
var $ = document.querySelector.bind (document),
$$ = Document.querySelectorAll.bind (document);
Vanaf dat moment, kan je met de shortcut naar document.querySelector hetzelfde doen als in jQuery:
var firstArticle = $("article");
var articles = $$("article");